<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="预定人姓名或者号码:">
        <el-input placeholder="请输入查询信息" v-model="keyword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchReserve()">查询</el-button>
      </el-form-item>
      <el-form-item label="选择房间类型:" :label-width="formLabelWidth">
        <el-select
          v-model="roomTypeSelected"
          clearable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in tableData"
            :key="item.type_id"
            :label="item.type_name"
            :value="item.type_name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择房间状态:" :label-width="formLabelWidth">
        <el-select
          v-model="roomStatusSelected"
          clearable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="净房" value="1"></el-option>
          <el-option label="已入住" value="2"></el-option>
          <el-option label="已预定" value="3"></el-option>
          <el-option label="维护" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="search(roomTypeSelected, roomStatusSelected)"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <div v-for="item of houseData" :key="item.room_id" id="kuai">
      房间号:{{ item.room_code }}
      {{ item.room_type.type_name }}

      <div class="k" v-show="item.room_status === 1">
        <p>净房</p>
        <button type="button" class="b1" @click="changeStatus(item.room_id)">
          更改房态
        </button>
        <button
          type="button"
          class="b1"
          @click="checkin(item.room_id, item.room_type.type_num, item.room_code)"
        >
          办理入住
        </button>
        <button
          type="button"
          class="b1"
          @click="ctrese(item.room_code, item.room_id)"
        >
          预定
        </button>
      </div>

      <div class="k1" v-show="item.room_status === 2">
        <p>已入住</p>
        <button type="button" class="b1" @click="upupup(item.room_id)">
          结账退房
        </button>
        <button type="button" class="b1" @click="getCc(item)">续住</button>
        <button type="button" class="b1" @click="selCheckin(item.room_id)">
          查看入住信息
        </button>
      </div>
      <div class="k2" v-show="item.room_status === 3">
        <p>已预定</p>
        <button
          type="button"
          class="b1"
          @click="delById(item.room_code, item.room_id)"
        >
          取消订单
        </button>
        <button type="button" class="b1" @click="selBycode(item.room_code)">
          查看预订单
        </button>
        <button
          type="button"
          class="b1"
          @click="checkin(item.room_id, item.room_type.type_num, item.room_code)"
        >
          办理入住
        </button>
      </div>
      <div class="k3" v-show="item.room_status === 4">
        <p>待维护</p>
        <button type="button" class="b1" @click="insertfix(item.room_id)">
          维护
        </button>
      </div>
      <div class="k3" v-show="item.room_status === 5">
        <p>维护中</p>
      </div>
    </div>

    <!-- 改变房态模态框开始 -->
    <el-dialog
      title="更改房态"
      :visible.sync="changeDialogFormVisible"
      width="20%"
    >

      <el-radio-group v-model="roomStatus">
        <el-radio label="1" value="1">净房</el-radio>
        <el-radio label="4" value="4">维护</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveStatus()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 改变房态模态框结束 -->


    <!-- fix表插入数据开始 -->
    <el-dialog title="维护录入" :visible.sync="fixFormVisible" width="25%">
      <el-form :model="fixform">
        <el-form-item label="维护编号" :label-width="formLabelWidth">
          <el-input v-model="fixform.fix_code" autocomplete="off"></el-input>
        </el-form-item>
      <el-form-item label="维护类型" :label-width="formLabelWidth">
        <el-radio-group v-model="fixform.fix_type">
          <el-radio label="维修" value="维修">维修</el-radio>
          <el-radio label="清扫" value="清扫">清扫</el-radio>
        </el-radio-group>
      </el-form-item>
       <el-form-item label="负责人" :label-width="formLabelWidth">
          <el-select
            v-model="fixform.staff_id"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in stafflist"
              :key="item.staff_id"
              :label="item.staff_name"
              :value="item.staff_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form> 
      <div slot="footer" class="dialog-footer">
        <el-button @click="fixFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savefix">确 定</el-button>
      </div>
    </el-dialog>
    <!-- fix表插入数据结束 -->

    <!-- 续住模态框开始 -->
    <el-dialog title="客户续费" :visible.sync="addDialogFormVisible">
      <el-form :model="selForm">
        <el-form-item label="房号" :label-width="formLabelWidth">
          <el-input type="text" v-model="selForm.record_room_code"  disabled></el-input>
        </el-form-item>
        <el-form-item label="入住时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="selForm.record_in_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
             disabled
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="退房时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="selForm.record_out_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth">
          <el-button @click="calcMoney()">计算</el-button>
        </el-form-item>

        <div v-if="calcing">
          <!-- <el-form-item label="之前消费" prop="expense" :label-width="formLabelWidth">
            <el-input v-model="selForm.expense" ></el-input>
          </el-form-item> -->
          <el-form-item
            label="续房费用"
            prop="midMoney"
            :label-width="formLabelWidth"
          >
            <el-input v-model="selForm.midMoney"></el-input>
          </el-form-item>
          <el-form-item
            label="最终消费"
            prop="lastMoney"
            :label-width="formLabelWidth"
          >
            <el-input v-model="selForm.lastMoney"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 续住模态框结束 -->

    <!-- 退房模态框开始 -->
    <el-dialog title="客户退房" :visible.sync="upDialogFormVisible">
      <el-form>
        <el-form-item label="房号" :label-width="formLabelWidth">
          <el-input type="text" v-model="upForm.record_room_code"  disabled></el-input>
        </el-form-item>
        <el-form-item label="入住时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="upForm.record_in_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
            disabled
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="退房时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="upForm.record_out_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
            disabled
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="本次消费" :label-width="formLabelWidth">
          <el-input type="text" v-model="upForm.expense"  disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="up()">打印凭证</el-button>
      </div>
    </el-dialog>
    <!-- 退房模态框结束 -->

    <!-- 预定模态框开始 -->
    <el-dialog title="预订人" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="房间号" :label-width="formLabelWidth">
          <el-input v-model="form.code" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.phpne" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="来源" :label-width="formLabelWidth">
          <el-select v-model="form.rese" placeholder="请选择预订方式">
            <el-option label="美团" value="美团"></el-option>
            <el-option label="飞猪" value="飞猪"></el-option>
            <el-option label="携程" value="携程"></el-option>
            <el-option label="线下" value="线下"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预定时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.reserve_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRese">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 预定模态框结束 -->

    <!-- 修改预定模态框开始 -->
    <el-dialog title="预订人" :visible.sync="dialogFormVisible1">
      <el-form :model="form2">
        <el-form-item label="房间号" :label-width="formLabelWidth">
          <el-input v-model="form2.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form2.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form2.phpne" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="来源" :label-width="formLabelWidth">
          <el-select v-model="form2.rese" placeholder="请选择预订方式">
            <el-option label="美团" value="美团"></el-option>
            <el-option label="飞猪" value="飞猪"></el-option>
            <el-option label="携程" value="携程"></el-option>
            <el-option label="线下" value="线下"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预定时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form2.reserve_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="setReserve(form2.code)"
          >修改</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改预定模态框结束 -->
    <!-- 人员入住信息模态框 -->
    <el-dialog title="人员入住信息" :visible.sync="dialogFormVisible2">
      <el-form :model="check">
        <el-form-item label="房间号" :label-width="formLabelWidth">
          <el-input v-model="check.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="check.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入住时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="check.checkin_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="退房时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="check.checkin_date2"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 人员入住信息模态框 -->
  </div>
</template>

<script>
export default {
    methods: {
      setReserve(code) {
        this.dialogFormVisible1 = false;
        this.$axios
          .post("/setReserve", {
            room_code: code,
            reserve_name: this.form2.name,
            reserve_phone: this.form2.phpne,
            reserve_time: this.form2.reserve_date,
            reserve_from: this.form2.rese
          })
          .then((res) => {
            this.loadData();
          })
          .catch((error) => {

          });
      },
      //查询入住信息
      selCheckin(rid) {
      this.dialogFormVisible2 = true,
        this.$axios
          .get("/getCheckin", {
            params: {
              room_id: rid,
            },
          })
          .then((res) => {
            this.check.code = res.data.data.record_room_code;
            this.check.name = res.data.data.guest.guest_name;
            this.check.checkin_date = res.data.data.record_in_date;
            this.check.checkin_date2 = res.data.data.record_out_date;
          })
          .catch((error) => {});
    },
      selBycode(code) {
        this.dialogFormVisible1 = true;

        this.$axios
          .get("/selByCode", {
            params: {
              room_code: code,
            },
          })
          .then((res) => {
            this.form2.code = res.data.data.room_code;
            this.form2.name = res.data.data.reserve_name;
            this.form2.phpne = res.data.data.reserve_phone;
            this.form2.reserve_date = res.data.data.reserve_time;
            this.form2.rese = res.data.data.reserve_from;
          })
          .catch((error) => {
          });
      },
      delById(code, room_id) {
        var code = code;
        var room_id = room_id;
        this.$axios
          .get("/selByCode", {
            params: {
              room_code: code,
            },
          })
          .then((res) => {

            this.delById2(res.data.data.reserve_id, room_id)
          })
          .catch((error) => {
          });
      },
      //模态框查询
      search(roomTypeSelected, roomStatusSelected) {
        this.loadDatap(roomTypeSelected, roomStatusSelected);
      },
      loadDatap(roomTypeSelected, roomStatusSelected) {
        this.$axios
          .get("/rooms", {
            params: {
              typeCheck: roomTypeSelected,
              statusCheck: roomStatusSelected,
            },
          })
          .then((res) => {
            this.houseData = res.data.data;
          })
          .catch((error) => {
          });
      },
      //模态框查询
      searchReserve() {
        this.$axios
          .get("/room/search/" + this.keyword)
          .then((res) => {
            this.houseData = res.data.data;
          })
          .catch((error) => {
          });
      },
      delById2(id, room_id) {
        this.$axios
          .get("/delById", {
            params: {
              reserve_id: id
            }
          })
          .then((res) => {
            this.couponSelected = 1;
            this.setStatus(room_id);
          })
          .catch((error) => {
          });
      },
      ctrese(code, id) {
        this.dialogFormVisible = true;
        this.form.code = code;
        this.form.room_id = id;
      },

      addRese() {
      this.$axios
        .post("/addRese", {
          reserve_name: this.form.name,
          reserve_phone: this.form.phpne,
          room_code: this.form.code,
          reserve_from: this.form.rese,
          reserve_time: this.form.reserve_date,
        })
        .then((res) => {
          this.dialogFormVisible = false;
          this.form.rese = "";
          this.form.name = "";
          this.form.phpne = "";
          (this.couponSelected = 3), this.setStatus(this.form.room_id);
          this.loadData();
        })
        .catch((error) => {});
    },
    setStatus(id) {
      this.$axios
        .get("/setStatus", {
          params: {
            room_id: id,
            room_status: this.couponSelected,
          },
        })
        .then((res) => {
          this.loadData();
        })
        .catch((error) => {});
    },
    changeStatus(room_id) {
      this.room_id = room_id;
      this.changeDialogFormVisible = true;
    },
    saveStatus() {
      this.$axios
        .get("/setStatus", {
          params: {
            room_id: this.room_id,
            room_status: this.roomStatus,
          },
        })
        .then((res) => {
          this.changeDialogFormVisible = false;
          this.loadData();
          if (this.roomStatus == 4) {
            this.commitFix(this.room_id);
          }
        })
        .catch((error) => {});
    },
    commitFix() {},
    loadData() {
      this.$axios
        .get("/room", {})
        .then((res) => {
          this.houseData = res.data.data;
        })
        .catch((error) => {});
    },
    //前端日期计算
    calcMoney(isInit) {
      this.calcing = false;
      // const endTime = new Date(this.selForm.record_out_date).getTime() / 1000 - parseInt(new Date(this.selForm.record_in_date).getTime() / 1000);
      // const timeDay = parseInt(endTime / 60 / 60 / 24) || 0;
      if (isInit) {
        this.selForm.old_out_date = this.selForm.record_out_date;
        this.selForm.midMoney = "0.00";
        this.selForm.lastMoney = this.selForm.expense;
      } else {
        const endTime1 =
          new Date(this.selForm.record_out_date).getTime() / 1000 -
          parseInt(new Date(this.selForm.old_out_date).getTime() / 1000);
        const timeDay1 = parseInt(endTime1 / 60 / 60 / 24) || 0;
        this.selForm.midMoney = parseFloat(
          timeDay1 * this.curItem.room_price
        ).toFixed(2);
        this.selForm.lastMoney = parseFloat(
          parseFloat(this.selForm.midMoney) + parseFloat(this.selForm.expense)
        ).toFixed(2);
        // this.selForm.lastMoney = (timeDay * this.curItem.room_price).toFixed(2)
      }
      this.calcing = true;
    },

    //办理入住
    checkin(room_id, type_num, room_code) {
      this.$router.push(
        "/Checkin/" + room_id + "/" + type_num + "/" + room_code
      );

    },
    getCc(item) {
      // alert(item.room_price)
      this.$axios
        .get("/check", {
          params: {
            room_id: item.room_id,
          },
        })
        .then((res) => {
          this.selForm = res.data.data;
          this.curItem = item || {};
          this.curItem.expense = res.data.data.expense;
          this.addDialogFormVisible = true;
          alert(res.data.message);
          this.calcMoney(true);
        })
        .catch((error) => {});
    },
    update() {
      this.selForm.expense = this.selForm.lastMoney;
      this.$axios.put("/check", this.selForm).then((res) => {
        alert(res.data.message);
        this.addDialogFormVisible = false;
        this.loadData();
      });
    },
    upupup(id) {
      this.upDialogFormVisible = true;
      this.$axios
        .get("/checkcc", {
          params: {
            room_id: id,
          },
        })
        .then((res) => {
          this.upForm = res.data.data;
          alert(res.data.message);
          // this.setStatus(id);
        })
        .catch((error) => {});
    },
    up() {
      this.upForm.status = 1;
      this.$axios.post("/checkzzz", {
        room_id: this.upForm.room_id,
        record_room_code: this.upForm.record_room_code,
        record_in_date: this.upForm.record_in_date,
        record_out_date: this.upForm.record_out_date,
        expense: this.upForm.expense,
        status: this.upForm.status,
        staff_telephone: sessionStorage.getItem("user"),
      }).then((res) => {
        alert(res.data.message);
        this.upDialogFormVisible = false;
        this.couponSelected = 4;
        this.setStatus(this.upForm.room_id);
        this.loadData();
      });
    },
    loadType() {
      this.$axios
        .get("/roomtype", {})
        .then((res) => {
          this.tableData = res.data.data;
        })
        .catch((error) => {});
    },
    insertfix(rid){
      this.room_id = rid;
      this.fixFormVisible = true;
      this.$axios.get("/staff/fix")
      .then(res=>{
        this.stafflist = res.data.data
      })
      .catch(error=>{})
    },
    savefix(){
      this.$axios.post("/fix",{
        room_id:this.room_id,
        fix_code:this.fixform.fix_code,
        staff_id:this.fixform.staff_id,
        fix_type:this.fixform.fix_type
      }).then(res=>{
        this.couponSelected = 5;
        this.setStatus(this.room_id);
        this.$router.push("/Roomfix")
      }).catch(error=>{})
    }
  },
    data() {
      return {
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          }
      },   
      changeDialogFormVisible: false,
      room_id: "",
      addDialogFormVisible: false,
      roomlist: [],
      keyword: "",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      curItem: {},
      calcing: true,
      form: {
        room_id: "",
        name: "",
        phpne: "",
        rese: "",
        code: "",
        room_price: "",
        reserve_date: "",
      },
      form2: {
        room_id: "",
        name: "",
        phpne: "",
        rese: "",
        code: "",
        reserve_date: "",
      },
      houseData: [],
      tableData: [],
      formLabelWidth: "120px",
      couponSelected: "",
      roomTypeSelected: "",
      roomStatusSelected: "",
      roomStatus: "",
      selForm: {
        record_room_code: "",
        record_in_date: "",
        record_out_date: "",
        old_out_date: "",
        expense: 0,
        midMoney: 0,
        lastMoney: 0,
        status: "",
      },
      check: {
        code: "",
        name: "",
        checkin_date: "",
        checkin_date2: "",
      },
      upDialogFormVisible: false,
      upForm: {
        room_id: "",
        record_room_code: "",
        record_in_date: "",
        record_out_date: "",
        expense: "",
        status: "",
      },
      fixform:{
        fix_code:"",
        fix_type:"",
        staff_id:""
      },
      stafflist:[],
      fixFormVisible:false
    }
    },
     mounted() {
      this.loadData();
      this.loadType();
    }
  }
</script>

<style scoped>
#kuai {
  border-radius: 2px;
  margin-top: 10px;

  float: left;
  margin-left: 10px;
}
.k {
  width: 300px;
  height: 180px;
  margin-top: -18px;
  background: #67c23a;
}
.k1 {
  width: 300px;
  height: 180px;
  margin-top: -18px;
  background: #e6a23c;
}
.k2 {
  width: 300px;
  height: 180px;
  margin-top: -18px;
  background: #409eff;
}
.k3 {
  width: 300px;
  height: 180px;
  margin-top: -18px;
  background: #f56c6c;
}
.k4 {
  width: 300px;
  height: 180px;
  margin-top: -18px;
  background: #909399;
}
.b1 {
  margin-top: 120px;
  float: right;
}
</style>
